<template>
    <div class="address-list page">
        <formHeader :title="'地址管理'"></formHeader>
        <div class="con">


        <div class="items">



            <div v-for="(item,index) in addressList" :key="item.id">

                <btn-slide-wrapper @btnClick="btnClick(index)" style="margin-top: 10px">
                    <div class="item">
                        <div class="s-btn">
                            <span v-show="item.selected" class="iconfont iconselected"></span>
                        </div>
                        <div class="info" @click="back(item.id)">
                            <div class="user">
                                <span class="name">{{item.name}}</span>
                                <span class="phone">{{item.mobile}}</span>
                            </div>
                            <div class="detail">
                                <span class="default" v-if="item.selected">默认</span>
                                <span class="txt">{{item.province+item.city+item.county+item.detail}}</span>
                            </div>
                        </div>
                        <div class="btn" @click="toEdit(item.id)">编辑</div>
                    </div>
                </btn-slide-wrapper>
            </div>


        </div>

        <div class="add-btn" @click="toEdit()">
            新增地址
        </div>
        </div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import btnSlideWrapper from '@/components/base/btn-slide-wrapper'
    import {listAddress,removeAddress} from "@/api/order";
    let fromPath ;
    export default {
        activated(){
          listAddress().then(res=>{
              this.addressList = res.data
          })
        },
        data() {
            return {
                addressList: []
            }
        },
        beforeRouteEnter(to, from, next){
            if(from.path.indexOf('/address/edit')<0){
                fromPath = from
            }
            next()
        },
        methods: {
            back(id){
                fromPath.query.addressId = id
                this.$router.replace(fromPath)
            },
            btnClick(index) {
                removeAddress(this.addressList[index].id).then(res=>{
                    this.addressList.splice(index, 1)
                })
            },
            turn(path){
                this.$router.push(path)
            },
            toEdit(id){
                this.$router.replace({
                    path:'/address/edit',
                    query:{
                        id:id
                    }
                })
            }
        },
        components: {
            btnSlideWrapper,formHeader
        }
    }
</script>

<style scoped lang="stylus">
.address-list
    z-index 2
    height 100%
    background url("~@/assets/helfcirindex.png") no-repeat $page-bg
    background-size 100% auto
    margin-top 46px
    .con
        padding-top 10px
        padding-bottom 35px
        .add-btn
            position fixed
            bottom 0
            left 0
            right 0
            height 35px
            background-color #00A398
            color white
            font-weight 300
            font-size 12px
            line-height 12px
            text-align center
            line-height 35px
        .items
            padding 0 10px

            .item
                white-space normal
                /*margin-top 10px*/
                padding 15px 0 15px
                background-color white
                border-radius 5px
                display flex
                align-items center

                .s-btn
                    flex 0 0 24px
                    display flex
                    justify-content center
                    align-items center

                    .iconfont
                        color #F0C808
                        font-size 15px

                .info
                    flex 1

                    .user
                        font-weight 300
                        font-size 0

                        .name
                            color #616977
                            font-size 14px
                            line-height 14px
                            margin-right 13px

                        .phone
                            line-height 12px
                            color #A9B1C0
                            font-size 12px

                    .detail
                        padding-right 48px
                        margin-top 7px
                        font-weight 300
                        font-size 0

                        .default
                            color #F7895E
                            padding 0px 7px
                            font-size 11px
                            line-height 11px
                            background-color #FCE5DB
                            margin-right 5px

                        .txt
                            color #616977
                            font-size 11px
                            line-height 18px

                .btn
                    flex 0 0 80px
                    width 40px
                    height 40px
                    text-align center
                    line-height 40px
                    color #A9B1C0
                    font-size 12px
                    border-left 1Px solid #A9B1C0


</style>